<!-- informationShow.vue -->
<template>
	<view class="nav">
	  <!-- 顶部导航 -->
		<toptab-bar></toptab-bar>
		<information-header-vue></information-header-vue>
	 
	</view>
	<view class="content">
	  <view class="layout">
	    <view 
	      class="box" 
	      v-for="item in SourceShow" 
	      :key="item.news_id"
		  @click="handleBoxClick(item)"
	    >
	      <view class="pic">
	        <image :src="getImageUrl(item.news_logo)" mode="aspectFit"></image>
	      </view>
	      
	      <view class="text">
	        <view class="title">{{ item.news_title }}</view> 
	        <view class="site">
	          <image src="/static/information/site.png" style="height:32rpx; width: 32rpx;"></image>
	          <text style="font-size: 24rpx;padding-left: 14rpx;color: black;">{{ item.address }}</text>
	        </view>
	        <view class="label">
	          <image src="/static/information/label.png" style="height: 32rpx; width: 32rpx;"></image>
	          <text style="font-size: 24rpx;padding-left: 14rpx;">{{ item.institution }}</text>
	        </view>
	      </view>
	      
	      <!-- 图标区域 -->
	      <view class="allIcon">
	        <view
	          class="icon"
	          v-for="icon in AllIcons.icons" 
	          :key="icon.id"
			  @click.stop="handleIconClick(icon.type, item)"
	        >
	          <image 
			  :src="icon.src" 
			  mode="widthFix"
			  :class="{
			      'active': 
			        (icon.type === 'like' && item.is_liked === '1') || 
			        (icon.type === 'subscribe' && item.is_subscribe === '1')
			    }"
			  ></image>
	          <!-- 根据图标类型动态绑定对应的数据 -->
	         <text class="icon-text">
	            {{
					
	              icon.type === "click" ? item.statistics.clicked_num :
	              icon.type === "like" ? item.statistics.liked_num :
	              icon.type === "comment" ? item.statistics.comment_num :
	              icon.type === "subscribe" ? item.statistics.subscribe_num :
	              item.statistics.shared_num
	            }}
	          </text>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script setup>
	import { reactive,ref,onMounted } from 'vue';
	import toptabBar from '@/pages/index/toptabbar/tabbar.vue';
	import informationHeaderVue from '../../../components/information/informationHeader.vue';
import decInformationApi from '../../../api/dec/decIndex/decInformationApi';
	const SourceShow = ref([])
	//获取图片
	const getImageUrl = (path) => {
	  return path ? `https://upload.gfinter.net/${path}` : ''
	}
	const AllIcons = reactive({
	  icons: [
	    { id: 1, src: "/static/information/view.png", type: "click" },
	    { id: 2, src: "/static/information/like.png", type: "like" },
	    { id: 3, src: "/static/information/comment.png", type: "comment" },
	    { id: 4, src: "/static/information/subscribe.png", type: "subscribe" },
	    { id: 5, src: "/static/information/share.png", type: "share" }
	  ],
	});
	
	const fetchSource = async () =>{
		try{
			let params = {
				section:887,
				club_id:2810
			}
			const res = await decInformationApi.GF_get_news_API(params)
			console.log('res:',res)
			
			if(res.error === 0){
				SourceShow.value = res.datas
				
			}
		}catch(err){
			console.error('获取资源展示失败：',err)
		}
		
	}
	
	const handleBoxClick = (item) =>{
		uni.navigateTo({
			 url: `/pages/index/information/infoDetails/detailSource?id=${item.news_id}`
		})
	}
	onMounted(() => {
		fetchSource();
	})
	
	// 处理图标点击
		const handleIconClick = (type, item) => {
		  if (type === 'like') {
		    item.is_liked = item.is_liked === "1" ? "0" : "1";
		    if (item.is_liked === "1") {
		      item.statistics.liked_num++;
		    } else {
		      item.statistics.liked_num--;
		    }
		  } else if (type === 'subscribe') {
		    item.is_subscribe = item.is_subscribe === "1" ? "0" : "1";
		    if (item.is_subscribe === "1") {
		      item.statistics.subscribe_num++;
		    } else {
		      item.statistics.subscribe_num--;
		    }
		  }
		};
</script>

<style lang="scss" scoped>
.content {
  background-color: #f7f7f9;
  .layout {
    padding: 0rpx 28rpx;
    .box {
	  background-color: #fff;
      margin-bottom: 18rpx;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
      overflow: hidden;
      .pic {
		  width: 694rpx;
		  height:420rpx;
        image {
          width: 100%;
        }
      }
      .text {
		background-color: #fff;
        margin: 10rpx 28rpx;
		.title{
			background-color: #fff;
			font-size: 32rpx;
			font-weight: 700;
		}
        .site {
		  background-color: #fff;
          margin: 30rpx auto;
		  // padding: 14rpx;
          display: flex;
          align-items: center; 
        }
        .label {
          margin: 30rpx auto;
          display: flex;
          align-items: center; 
        }
      }
      .allIcon {
		// background-color: #fff;
        display: flex;
        justify-content: space-between; // 图标之间均匀分布
        
        align-items: center; // 垂直居中对齐
        padding: 35rpx 34rpx;

        .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10rpx; // 图标和文字之间的间距
		  
          image {
			
            width: 32rpx;
            height: 30rpx;
			&.active {
			  filter: brightness(0) saturate(100%) invert(44%) sepia(98%) saturate(1239%) hue-rotate(353deg) brightness(98%) contrast(101%);
			  // // /* 或者直接修改颜色（如果图片是 SVG） */
			  // fill: #FA6409;
			}
          }

          .icon-text {
            font-size: 24rpx;
            color: #666;
          }
        }
      }
    }
  }
}
</style>
